<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-banner-add">
			<div class="form-group">	
				<label class="col-sm-3 control-label">banner名称：</label>
				<div class="col-sm-8">
					<input id="name" name="name" class="form-control" type="text">
					<input id="img" name="img"   class="form-control" type="hidden">
				</div>
			</div>


			<div class="form-group">
				<label class="col-sm-3 control-label">分类：</label>
				<div class="col-sm-9">
					<select class="form-control" name="type">
							<option value="1">首页展示</option>
							<option value="2">分页也展示</option>
					</select>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">图片地址：</label>
				<div class="col-sm-8">
					<div class="layui-upload">
					  <button type="button" class="layui-btn" id="test1">上传图片</button>
					  <div class="layui-upload-list">
					    <img class="layui-upload-img" id="demo1" style="max-width: 217px;">
					    <p id="demoText"></p>
					  </div>
					</div> 
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">商品编号：</label>
				<div class="col-sm-8">
					<input id="pid" name="pid" class="form-control" type="text">
				</div>
			</div>
		</form>
	</div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
     layui.use('upload', function(){
    	 var $ = layui.jquery ,upload = layui.upload;
    	 
    	 //普通图片上传
    	  var uploadInst = upload.render({
    	    elem: '#test1'
    	    ,url: '/common/upload'
    	    ,before: function(obj){
    	      //预读本地文件示例，不支持ie8
    	      obj.preview(function(index, file, result){
    	        $('#demo1').attr('src', result); //图片链接（base64）
    	      });
    	    }
    	    ,done: function(res){
    	      //如果上传失败
    	      if(res.code > 0){
    	        return layer.msg('上传失败');
    	      }
    	      //上传成功
    	      console.log(res);
    	      var fileName=res.fileName;
    	      $("#img").val(fileName);
    	      
    	    }
    	    ,error: function(){
    	      //演示失败状态，并实现重传
    	      var demoText = $('#demoText');
    	      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
    	      demoText.find('.demo-reload').on('click', function(){
    	        uploadInst.upload();
    	      });
    	    }
    	  });
    	
    });
    
    
    
		var prefix = ctx + "system/banner"
		$("#form-banner-add").validate({
			rules:{
				img:{
					required:true,
				},
			}
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
	            $.operate.save(prefix + "/add", $('#form-banner-add').serialize());
	        }
	    }
	</script>
</body>
</html>
